<template>
  <div class="add-friends">
    <nav>
      <van-row>
        <van-col span="4" @click="backFunc">&lt;</van-col>
        <van-col span="14" offset="1">添加朋友</van-col>
      </van-row>
    </nav>
    <div class="search-warp">
      <div class="search-text" @click="goToSearchView">
        <van-icon name="search" class="search-icon" />
        账号 / 手机号
      </div>

      <div class="my-id">
        我的微信号: {{ userId }}
        <span class="qr-cord"></span>
      </div>
    </div>

    <div class="search-bar">
      <van-row type="flex" justify="end" align="center" class="van-row">
        <van-col span="4"
          ><img src="@/assets/image/addressImg/icon6.png" alt="img"
        /></van-col>
        <van-col span="17">
          <div class="title">雷达加朋友</div>
          <div class="sub-title">添加附近朋友</div>
        </van-col>
        <van-col span="2">&gt;</van-col>
      </van-row>
      <van-row type="flex" justify="end" align="center" class="van-row">
        <van-col span="4"
          ><img src="@/assets/image/addressImg/icon3.png" alt="img"
        /></van-col>
        <van-col span="17">
          <div class="title">面对面建群</div>
          <div class="sub-title">与身边的朋友进入同一个群聊</div></van-col
        >
        <van-col span="2">&gt;</van-col>
      </van-row>
      <van-row type="flex" justify="end" align="center" class="van-row">
        <van-col span="4"
          ><img src="@/assets/image/addressImg/icon7.png" alt="img"
        /></van-col>
        <van-col span="17">
          <div class="title">扫一扫</div>
          <div class="sub-title">扫描二维码名片</div></van-col
        >
        <van-col span="2">&gt;</van-col>
      </van-row>
      <van-row type="flex" justify="end" align="center" class="van-row">
        <van-col span="4"
          ><img src="@/assets/image/addressImg/icon1.png" alt="img"
        /></van-col>
        <van-col span="17">
          <div class="title">手机联系人</div>
          <div class="sub-title">添加或邀请通讯录中的朋友</div></van-col
        >
        <van-col span="2">&gt;</van-col>
      </van-row>
      <van-row type="flex" justify="end" align="center" class="van-row">
        <van-col span="4"
          ><img src="@/assets/image/addressImg/icon5.png" alt="img"
        /></van-col>
        <van-col span="17">
          <div class="title">公众号</div>
          <div class="sub-title">获取更多资讯和服务</div></van-col
        >
        <van-col span="2">&gt;</van-col>
      </van-row>
      <van-row type="flex" justify="end" align="center" class="van-row">
        <van-col span="4"
          ><img src="@/assets/image/addressImg/icon8.png" alt="img"
        /></van-col>
        <van-col span="17">
          <div class="title">企业微信联系人</div>
          <div class="sub-title">通过手机号搜索企业微信用户</div></van-col
        >
        <van-col span="2">&gt;</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      userId: (state) => state.login.userId,
    }),
  },
  methods: {
    backFunc() {
      this.$router.push({
        name: "home",
      });
    },
    goToSearchView() {
      this.$router.push({
        name: "searchView",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-friends {
  background-color: rgb(17, 17, 17);
  height: 100vh;
  overflow: hidden;

  nav {
    width: 100vw;
    height: 45px;
    background-color: rgb(17, 17, 17);
    line-height: 45px;
    color: white;
    text-align: center;
    font-size: 14px;
  }

  .search-warp {
    height: 100px;
    text-align: center;
    color: white;
    background-color: rgb(17, 17, 17);
    color: gray;

    .search-text {
      width: 90%;
      margin: 0 auto;
      height: 35px;
      line-height: 35px;
      color: rgb(177, 177, 177);
      background-color: rgb(28, 28, 28);
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .search-icon {
        font-size: 20px;
        margin-right: 5px;
      }
    }

    .my-id {
      display: flex;
      justify-content: center;
      align-items: center;
      .qr-cord {
        display: inline-block;
        background-repeat: no-repeat;
        background-image: url("@/assets/image/addressImg/icon9.png");
        background-size: 13px;
        height: 15px;
        width: 15px;
        margin-left: 10px;
      }
    }
  }

  .search-bar {
    width: 100%;
    font-size: 14px;
    color: white;

    .van-row {
      height: 55px;
      background-color: rgb(24, 24, 24);
      margin-bottom: 5px;
    }

    img {
      width: 35px;
      height: 35px;
    }

    .sub-title {
      color: gray;
      font-size: 12px;
      margin-top: 6px;
    }
  }
}
</style>